<template>
    <div class="content">
        <div class="header">
            车间智能通风系统
        </div>
        <div class="body">
            <div class="body-title">
                实时数据
            </div>
            <div class="body-items">
                <div class="body-item">
                    <div class="body-item-title">
                        车间温度
                    </div>
                    <div class="body-item-text" :class="red1">
                        {{ temperature }} 摄氏度
                    </div>
                </div>
                <div class="body-item">
                    <div class="body-item-title">
                        车间湿度
                    </div>
                    <div class="body-item-text" :class="red2">
                        {{ humidity }} RH
                    </div>
                </div>
                <div class="body-item">
                    <div class="body-item-title">
                        车间CO2浓度
                    </div>
                    <div class="body-item-text" :class="red3">
                        {{ concentration }} ppm
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-item">
                <div class="footer-item-text">
                    风扇控制
                </div>
                <div v-if="show">
                    <el-button type="primary" @click="change">开启风扇</el-button>
                </div>
                <div v-else>
                    <el-button type="warning" @click="change">关闭风扇</el-button>
                </div>
            </div>
            <!--            <div class="footer-item">-->
            <!--                <div class="footer-item-text">-->
            <!--                    加湿器控制-->
            <!--                </div>-->
            <!--                <div v-if="show2">-->
            <!--                    <el-button type="primary" @click="change2">开启加湿器</el-button>-->
            <!--                </div>-->
            <!--                <div v-else>-->
            <!--                    <el-button type="warning" @click="change2">关闭加湿器</el-button>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        name: 'HomeView',
        components: {},
        data() {
            return {
                timer: null,
                show: true,
                // show2: true,
                temperature: "",
                humidity: "",
                concentration: "",
                red1: "",
                red2: "",
                red3: ""
            }
        },
        methods: {
            change() {
                let that = this;
                axios.post('http://192.168.31.238:8000/open/', {
                    open: that.show
                }).then(
                    function (response) {
                        // console.log(response)
                        let data = response.data
                        if (data.code === 1) {

                            that.$notify({
                                title: '成功',
                                message: data.msg,
                                type: 'success',
                                duration: 2000
                            });
                            that.show = !that.show
                        } else {
                            console.log("报告异常")
                            that.$notify({
                                title: '成功',
                                message: data.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    }
                ).catch(function (error) {
                    console.log(error);
                })
                // this.show = !this.show

            },
            // change2() {
            //     this.show2 = !this.show2
            // },
            getInfo() {
                let that = this
                axios.get('http://192.168.31.238:8000/getInfo/', {})
                    .then(function (response) {
                        let data = response.data
                        if (data.code === 1) {
                            console.log("获取到数据")
                            that.temperature = data.data.temperature;
                            that.humidity = data.data.humidity;
                            that.concentration = data.data.concentration;
                            that.check()
                        } else {
                            console.log("报告异常")
                            alert(data.msg)
                            console.log("关闭定时器")
                            clearInterval(that.timer)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            check() {
                if (this.temperature > 25) {
                    this.red1 = "red"
                } else if (this.temperature < 18) {
                    this.red1 = "blue"

                } else {
                    this.red1 = ""
                }
                if (this.humidity > 70) {
                    this.red2 = "red"
                } else if (this.humidity < 40) {
                    this.red2 = "blue"
                } else {
                    this.red2 = ""
                }
                if (this.concentration > 1600) {
                    this.red3 = "red"
                } else {
                    this.red3 = ""
                }
            }

        },
        mounted() {
            this.timer = setInterval(() => {
                this.getInfo()
            }, 1000)
            this.getInfo()


        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss">
  .content {
    width: 100vw;
    //height: 100vh;

    .header {
      background-color: #67C23A;
      //margin: 2vh auto;
      width: 100vw;
      height: 14vh;
      line-height: 14vh;
      text-align: center;
      font-size: 30px;
      color: #f1f1f1;
    }

    .body {
      width: 100vw;
      height: 60vh;
      background-color: #F2F6FC;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      .body-title {
        height: 10vh;
        line-height: 10vh;
        font-size: 24px;

      }

      .body-items {
        width: 100%;
        height: 50vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

        .body-item {
          width: 25%;
          height: 80%;
          background-color: #42b983;
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;

          .body-item-title {
            font-size: 18px;
            background-color: #409EFF;
            width: 70%;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            text-align: center;
            color: #f1f1f1;
          }

          .body-item-text {
            font-size: 28px;
            background-color: #f1f1f1;
            width: 70%;
            height: 120px;
            line-height: 120px;
            border-radius: 10px;
            text-align: center;
          }
        }
      }
    }

    .footer {
      width: 100vw;
      height: 26vh;
      display: flex;
      flex-direction: row;
      background-color: #909399;
      align-items: center;
      justify-content: space-around;
      color: #606266;

      .footer-item {
        width: 20%;
        height: 50%;
        background-color: #DCDFE6;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .footer-item-text {
          font-size: 20px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .red {
    color: red;
    font-weight: bold;
  }

  .blue {
    color: blue;
    font-weight: bold;
  }
</style>